﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="docs.min.css" rel="stylesheet">
    <script src="jquery-2.0.3.js"></script>
    <script src="bootstrap.min.js"></script>

    <style type="text/css">
        #myTable th, #table-header, #myTable td.serial
        {
            text-align: center;
        }

        #myTable
        {
            display: none;
        }

            #myTable td.money
            {
                text-align: right;
            }
    </style>
</head>
<body style="padding: 10px">



    <form role="form">
        <div class="form-group">
            <label for="Price">单价</label>
            <input type="text" class="form-control" id="Price" placeholder="单价">
        </div>
        <div class="form-group">
            <label for="KczArea">面积</label>
            <input type="text" class="form-control" id="KczArea" placeholder="面积">
        </div>
        <button type="button" class="btn btn-default" onclick="clac()">计算</button>
    </form>

    <br />

    <div class="panel panel-default" id="myTable">
        <div class="panel-heading " id="table-header">补差列表</div>
        <table class="table  table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th rowspan="2">序号</th>
                    <th colspan="2">a</th>
                    <th colspan="2">b</th>
                    <th rowspan="2">合计</th>
                </tr>
                <tr>
                    <th>面积</th>
                    <th>总价</th>
                    <th>面积</th>
                    <th>总价</th>
                </tr>
            </thead>

            <tbody>
            </tbody>
        </table>
    </div>


    <script type="text/javascript">

        Function.prototype.extend = function (name, func) {
            /// <summary>对象扩展</summary>
            /// <param name="name" type="string">方法名称</param>
            /// <param name="func" type="int">方法体</param>
            var me = this;
            if (typeof arguments[0] == "object") {
                $.each(arguments[0],
                function (key, fn) {
                    me.prototype[key] = fn;
                })
            } else if (typeof arguments[0] == "string") {
                me.prototype[arguments[0]] = arguments[1];
            }
        };


        //String扩展
        String.extend({
            getByteLength: function () {
                /// <summary>获取字符串的字节数</summary>
                return this.replace(/[^\x00-\xff]/g, "ci").length;
            },
            format: function (opts) {
                /// <summary>格式化字符串</summary>
                /// <param name="opts" type="objects">参数</param>
                source = this;
                var data = Array.prototype.slice.call(arguments, 0), toString = Object.prototype.toString;
                if (data.length) {
                    data = data.length == 1 ?
                    /* ie 下 Object.prototype.toString.call(null) == '[object Object]' */
                        (opts !== null && (/\[object Array\]|\[object Object\]/.test(toString.call(opts))) ? opts : data)
                        : data;
                    return source.replace(/\{(.+?)\}/g, function (match, key) {
                        var replacer = data[key];
                        // chrome 下 typeof /a/ == 'function'
                        if ('[object Function]' == toString.call(replacer)) {
                            replacer = replacer(key);
                        }
                        return ('undefined' == typeof replacer ? '' : replacer);
                    });
                }
                return source;
            },
            trim: function () {
                /// <summary>去掉字符串两边的空格</summary>
                return $.trim(this);
            },
            xmlDecode: function () {
                /// <summary>对xml特殊字符进行解码</summary>;
                return this.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;lt;/g, "<").replace(/&amp;gt;/g, ">").replace(/&amp;/g, "&").replace(/&apos;/g, "'").replace(/&quot;/g, "\"");
            },
            xmlEncode: function () {
                /// <summary>对xml特殊字符进行编码</summary>
                return this.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\'/g, "&apos;").replace(/\"/g, "&quot;");
            },
            toDate: function (splitChar) {
                /// <summary>只穿转化为日期</summary>
                /// <param name="splitChar" type="String">日期分隔符号，默认为-</param>
                splitChar = splitChar || "-";
                var reg = new RegExp(splitChar, "g")
                return new Date(this.replace(reg, '/'));
            },
            toDateString: function () {
                //日期将字符串格式化为："yyyy-MM-dd"
                if (this == "" || this == null || this == undefined) {
                    return "";
                }
                return this.toDate().format("yyyy-MM-dd");
            },
            toBool: function () {
                var str = this.toString().toLocaleLowerCase();
                if (str === "1" || str === "true") {
                    return true;
                } else if (str === "0" || str === "false") {
                    return false;
                }
            },
            toInt: function () {
                /// <summary>转化为整数</summary>
                return parseInt(this, 10);
            },
            toFloat: function (round) {
                /// <summary>转化为整数</summary>
                /// <param name="round" type="int">小数保留位</param>
                var num = this.replace(/,/g, "");
                var res = (isNaN(num) || num == "") ? 0 : parseFloat(num);
                return round ? res.round(round) : res;
            },
            isNumber: function () {
                var num = this.replace(/,/g, "");
                return !(isNaN(num) || num == "");
            },
            escape: function () {
                if (myEscape) {
                    return myEscape(this);
                } else {
                    throw ("需要引入/_controls/util/util.js");
                }
            }
        });



        Number.extend({
            round: function (n) {
                /// <summary>数字进行特定保留位处理</summary>
                /// <param name="n" type="int">小数位数</param>
                n = Math.pow(10, n || 0).toFixed(n < 0 ? -n : 0);
                return Math.round(this * n) / n;
            },
            add: function (num, round) {
                /// <summary>加法运算</summary>
                /// <param name="num" type="float">被加数</param>
                /// <param name="round" type="int">保留几位小数</param>
                num = num.toString().replace(/,/g, "");
                if (isNaN(num)) { throw "被加数不能转化成数字" }
                round = round == undefined ? 2 : round.toString().toInt();
                num = num.toFloat();
                var r1 = 0, r2 = 0, arr1 = this.toString().split("."), arr2 = num.toString().split(".");
                if (arr1.length > 1) { r1 = arr1[1].length };
                if (arr2.length > 1) { r2 = arr2[1].length };
                var m = Math.pow(10, Math.max(r1, r2));
                return ((this * m + num * m) / m).round(round);
            },
            sub: function (num, round) {
                /// <summary>减法运算</summary>
                /// <param name="num" type="float">被减数</param>
                /// <param name="round" type="int">保留几位小数</param>
                num = num.toString().replace(/,/g, "");
                if (isNaN(num)) { throw "被加数不能转化成数字" }
                round = round == undefined ? 2 : round.toString().toInt();
                num = num.toFloat();
                var r1 = 0, r2 = 0, arg1 = this.toString().split("."), arg2 = num.toString().split(".");
                if (arg1.length > 1) { r1 = arg1[1].length };
                if (arg2.length > 1) { r2 = arg2[1].length };
                var m = Math.pow(10, Math.max(r1, r2));
                return ((this * m - num * m) / m).round(round);
            },
            mul: function (num, round) {
                /// <summary>乘法运算</summary>
                /// <param name="num" type="float">被乘数</param>
                /// <param name="round" type="int">保留几位小数</param>
                num = num.toString().replace(/,/g, "");
                if (isNaN(num)) { throw "被加数不能转化成数字" }
                round = round == undefined ? 2 : round.toString().toInt();
                num = num.toFloat();
                var r1 = 0, r2 = 0, arg1 = this.toString().split("."), arg2 = num.toString().split(".");
                if (arg1.length > 1) { r1 = arg1[1].length };
                if (arg2.length > 1) { r2 = arg2[1].length };
                return ((this * Math.pow(10, r1) * num * Math.pow(10, r2)) / Math.pow(10, r1.add(r2))).round(round);
            },
            div: function (num, round) {
                /// <summary>除法运算</summary>
                /// <param name="num" type="float">被除数</param>
                /// <param name="round" type="int">保留几位小数</param>
                num = num.toString().replace(/,/g, "");
                if (isNaN(num)) { throw "被加数不能转化成数字" }
                else if (new Number(num) == 0) {
                    return "";
                }
                round = round == undefined ? 2 : round.toString().toInt();
                var r1 = 0, r2 = 0, arr1 = this.toString().split("."), arr2 = num.toString().split(".");
                if (arr1.length > 1) { r1 = arr1[1].length };
                if (arr2.length > 1) { r2 = arr2[1].length };
                var m = Math.pow(10, Math.max(r1, r2));
                return ((this * m) / (num * m)).round(round);
            }
        });



        function clac() {
            var $table = $("#myTable");
            $table.find("tbody tr").remove();

            var Amount = Number($("#Price").val());
            var KczArea = Number($("#KczArea").val());

            if (isNaN(Amount) || isNaN(KczArea)) {
                return;
            }

            var sum = KczArea.mul(Amount, 2),
                 i = 0;

            var html = [];
            for (var a = 0.01; a < KczArea ; a = a.add(0.01, 2)) {
                var b = Number(KczArea).sub(a, 2);
                var aSum = a.mul(Amount, 2);
                var bSum = b.mul(Amount, 2);

                if (sum != aSum.add(bSum, 2)) {
                    html.push("<tr>");
                    html.push("<td class='serial' >{0}</td>".format(++i));

                    html.push("<td class='money'>{0}</td>".format(a));
                    html.push("<td class='money'>{0}</td>".format(aSum));

                    html.push("<td class='money'>{0}</td>".format(b));
                    html.push("<td class='money'>{0}</td>".format(bSum));

                    html.push("<td class='money'>{0}</td>".format(aSum.add(bSum, 2)));
                    html.push("</tr>");

                }

                if (i >= 50) {
                    break;
                }
            }
            $table.find("table").append(html.join(""));
            $("#table-header").empty().append("<span style='color:red ; padding-left:2em'>总价:{0}<span>".format(sum));
            $table.show();
        }



    </script>
</body>
</html>
